<template>

    <div class="embroidery-colors">

        <el-popover placement="bottom" width="256" trigger="click" v-for="(code,index) in value" :key="index">
            <div class="input-color" slot="reference">
                <em :style="{ backgroundColor: getColorByCode(code) }"></em>
                <i class="iconfont icon-xia"></i>
            </div>
            <div class="input-picker">
                <span v-for="(color,idx) in colors" :key="idx" :style="{ backgroundColor: color.hex }" @click="setColor(index,color.code)"></span>
            </div>
        </el-popover>

    </div>

</template>
<script>
import { Pattern, colors } from "@/utils/EmbroideryPattern.js";
export default {
    props: {
        value: { type: Array, default: () => [] },
    },
    data () {
        return {
            colors: colors,
        };
    },

    methods: {
        getColorByCode (code) {
            const active = this.colors.find(i => i.code == code)
            return active ? active.hex : undefined
        },
        setColor (index, code) {
            const val = this.value.slice(0)
            val[index] = code
            this.$emit('input', val)
        },

    },
};
</script>

<style lang="scss" scoped>
.embroidery-editor {
    width: 80vw;
    height: 80vh;
    display: flex;
    align-items: center;
}

.embroidery-preview {
    flex: 1;
    &::before {
        content: '';
        display: block;
        padding-bottom: 100%;
    }
}

.embroidery-options {
    width: 300px;
    border: 1px solid #ddd;
    height: 100%;
}

.embroidery-colors {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px 10px;
}

.input-color {
    width: 30px;
    height: 30px;
    display: flex;
    position: relative;
    margin: 5px;
    em {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        text-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.5);
    }
}

.input-picker {
    display: flex;
    flex-wrap: wrap;
    span {
        margin: 5px;
        width: 30px;
        height: 30px;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #ddd;
        cursor: pointer;
    }
}
</style>
